import React from 'react';
import { View, Clipboard } from 'react-native';
import ImageCacheManager from 'react-native-cached-fast-image/ImageCacheManager'
import { Lt, Color, Nav, Label, Button, Fimage, Jpp, Jx, Navigator, Dialog, Login } from "../_utils";
import { Net, NET_RI } from "../_net"
import { eRole } from './_me';
import { cTemp } from '../_util';

const c_imageCacheManager = new ImageCacheManager();
const c_cacheZero = "0M";
class ListInfo extends React.PureComponent{
    render(){
        const {title, children, style} = this.props;
        let child = Jx.isElement(children) ? children : <Label style={{fontSize:Lt.c16, color:Color.c6}}>{children}</Label>
        return <View style={{paddingHorizontal:Lt.pad, flexDirection:"row", justifyContent:"space-between", alignItems:"center", backgroundColor:"white", ...style}}>
            <Label style={{fontSize:Lt.c16, color:Color.c3, marginVertical:20}}>{title}</Label>
            {child}
        </View>
    }
}
function buttonRight(title, onPress){
    return <Button.Border1 onPress={onPress} title={title} style={{fontSize:Lt.c16, color:Color.c6, borderWidth:0}}/>
}
// 我 点击头像 进来的界面
export class Info extends React.PureComponent{
    constructor(props){
        super(props);

        const {data} = this.props.navigation.state.params;
        this.state = {
            preData : data,
            data:{
                phone : Jpp.questionMark,
                code:Jpp.questionMark,
            }, 
            cacheSize : c_cacheZero,
        }
        this.onClear = this.onClear.bind(this);
        this.onLogout = this.onLogout.bind(this);
    }
    static navigationOptions = {
        ...Nav.options,
        headerTitle:"个人信息",
    }
    componentWillMount(){
        Net.request("team/message", null, {NET_RI}).then(r=>{
            if(r.data){
                this.setState({data:r.data})
            }
        })
        // 计算图片缓存大小
        c_imageCacheManager.getCacheInfo().then(r=>{ 
            let cacheSize = r.size;
            if(cacheSize > 1024 * 1024){
                cacheSize = parseFloat(cacheSize / 1024 / 1024).toFixed(2) + "M";
            }else if(cacheSize > 1024){
                cacheSize = parseFloat(cacheSize / 1024).toFixed(2) + "K";
            }else{
                cacheSize += "B";
            }
            this.setState({cacheSize});
        })
    }
    onCopy(copy){
        Clipboard.setString(copy);
        Dialog.toast("已复制到剪贴板")
    }
    onClear(){
        Dialog.msg2("清除缓存", ()=>{
            c_imageCacheManager.clearCache();
            Login.clearCache();
            Dialog.toast("清除完毕");
            this.setState({cacheSize : c_cacheZero});
        });
    }
    onLogout(){
        cTemp.setFromInfo(true);
        Navigator.reset("PageAutoLogin");
    }
    render(){
        const {preData, data, cacheSize} = this.state;
        return <View style = {{flex:1, backgroundColor:Color.back}}>
            <Nav.StatusBar/>
            <ListInfo title={"头像"} style={{paddingTop:Lt.pad}}><Fimage style={{width:60, height:60, borderRadius:30}}uri={preData.image}/></ListInfo>
            <ListInfo title={"用户名"}>{preData.name}</ListInfo>
            <ListInfo title={"手机号"}>{data.phone}</ListInfo>
            {
                (preData.roleId == eRole.FANS) ? null :
                <ListInfo title={"邀请码: " + data.code}>{buttonRight("复制", this.onCopy.bind(this, "" + data.code))}</ListInfo>
            }
            <ListInfo title={ "清除缓存" }>{buttonRight(cacheSize, this.onClear)}</ListInfo>
            <Button.FlexPure onPress={this.onLogout} title={"退出登录"}/>
        </View>;
    }
}